<template>
    <view :data-theme="globPrimary">
        <u-navbar>
            <view class="topic-navbar-collection" @click="changeCollection">
                <u-icon
                    name="star-fill"
                    :color="topicData.collected ? '#FF8A52' : '#DCDFE6'"
                    size="40"
                ></u-icon>
            </view>
            <view class="topic-navbar-sheet" @click="onOpenCard">
                <u-image
                    width="40"
                    height="40"
                    src="@/pageFound/static/images/exam_sheet_icon.png"
                ></u-image>
            </view>
        </u-navbar>
        <view class="topic-header u-flex" v-if="!$u.test.empty(paperParts)">
            <view class="title u-line-1">{{ examTitle }}</view>
            <u-image
                width="28rpx"
                height="32rpx"
                src="@/pageFound/static/images/maker.png"
                class="img"
            ></u-image>
            <view class="conut active">{{ examIndex + 1 }}</view>
            <view class="conut">/{{ examCount }}</view>
        </view>

        <view class="topic-body" v-if="!$u.test.empty(topicData)">
            <record-question
                :question="topicData"
                :value="questionValue(topicData)"
                :answerStatus="answerStatus"
                :exam-type="examName"
                disabled
                showAnswerIocn
            ></record-question>
        </view>

        <record-pagination
            :show-prev-button="examIndex > 0"
            :show-next-button="examIndex < examCount - 1"
            @prev="handleTopicPrev"
            @next="handleTopicNext"
            v-if="examIndex > 0 || examIndex < examCount - 1"
        ></record-pagination>

        <!-- 答题卡 -->
        <record-card
            v-model="cardVisible"
            :title="examTitle"
            :disabled="disabled"
            @change="handleTopicChange"
        ></record-card>

        <edu-empty v-if="!loading && $u.test.empty(paperParts)"></edu-empty>
    </view>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import recordQuestion from "../components/record-question.vue";
import recordPagination from "../components/record-pagination.vue";
import recordCard from "../components/record-card.vue";

export default {
    components: {
        recordQuestion,
        recordPagination,
        recordCard,
    },
    data() {
        return {
            loading: false,
            queryId: 0,
            examTitle: "", // 考试标题
            examCount: 0, // 试题总数
            topicData: {},
            cardVisible: false,
            uniqueCode: "",
            disabled: false,
            answerStatus: 0,
            paperParts: [],
            examName: 0,
        };
    },
    computed: {
        ...mapState({
            examIndex: (state) => state.examination.examIndex,
            examList: (state) => state.examination.examList,
        }),
        ...mapGetters({
            globPrimary: "designSetting/getGlobTheme",
            globPrimaryColor: "designSetting/getGlobThemeColor",

            topicId: "examination/getTopicId",
        }),
        topicItemData() {
            // 加载试题
            let topic = this.examList.find(
                (item) => item.topic_id == this.topicId
            );
            if (topic) {
                return topic;
            } else {
                return {
                    answer_right: 0,
                    answered: 0,
                    epar_id: 0,
                    part_id: 0,
                    subjective: 0,
                    topic_id: 0,
                    topic_level: 0,
                    user_score: 0,
                };
            }
        },
    },
    onLoad(option) {
        if (!this.$u.test.empty(option.name)) {
            this.examName = option.name;
        }
        this.getRecordInfo(option.id, option.type, option.topic_id);
    },
    methods: {
        // 获取的基础信息
        getRecordInfo(id, type, topic_id) {
            this.loading = true;
            // 错题解析
            if (!this.$u.test.empty(type) && type == 0) {
                this.$edu.api
                    .getWrongAnalysis({
                        record_id: id,
                    })
                    .then((res) => {
                        const { data } = res;
                        this.$store.commit(
                            "examination/init",
                            data.paper_parts
                        );
                        this.examCount = data.total_count;
                        this.examTitle = data.paper_title;
                        this.uniqueCode = data.unique_code;
                        this.answerStatus = data.answer_status;
                        this.queryId = data.id;
                        this.paperParts = data.paper_parts;
                        if (!this.$u.test.empty(data.paper_parts)) {
                            // 加载试题
                            this.getExamTopic();
                        } else {
                            this.loading = false;
                        }
                    });
            } else {
                // 全部解析
                this.$edu.api
                    .getExamRecoed({
                        record_id: id,
                    })
                    .then((res) => {
                        const { data } = res;
                        this.$store.commit(
                            "examination/init",
                            data.paper_parts
                        );
                        this.examCount = data.total_count;
                        this.examTitle = data.paper_title;
                        this.uniqueCode = data.unique_code;
                        this.answerStatus = data.answer_status;
                        this.queryId = data.id;
                        this.paperParts = data.paper_parts;

                        if (!this.$u.test.empty(topic_id) && topic_id != 0) {
                            let index = this.examList.findIndex(
                                (item) => item.topic_id == topic_id
                            );
                            this.$store.commit("examination/change", index);
                        }
                        if (!this.$u.test.empty(data.paper_parts)) {
                            // 加载试题
                            this.getExamTopic();
                        }
                    });
            }
        },
        // 获取试题
        getExamTopic() {
            let topic = this.examList.find(
                (item, index) => index == this.examIndex
            );
            uni.showLoading({
                title: "加载中...",
            });
            this.loading = true;
            this.$edu.api
                .getExamMsg({
                    unique_code: this.uniqueCode,
                    epar_id: this.queryId,
                    part_id: topic.part_id,
                    topic_id: topic.topic_id,
                })
                .then((res) => {
                    const { data } = res;
                    if (!this.$u.test.empty(data)) {
                        this.topicData = data.topic;
                    }
                    setTimeout(() => {
                        this.loading = false;
                        uni.hideLoading();
                    }, 500);
                })
                .catch((err) => {
                    uni.hideLoading();
                });
        },
        // 当前值
        questionValue(item) {
            let empty = null;
            if (this.$edu.test.inArray(item.question_type, [1, 2, 8])) {
                if (this.$u.test.empty(item.answer_data)) {
                    empty = "";
                } else {
                    empty = item.answer_data.toString();
                }
            } else if (
                this.$edu.test.inArray(item.question_type, [3, 4, 5, 7])
            ) {
                if (this.$u.test.empty(item.answer_data)) {
                    empty = [];
                } else {
                    empty = item.answer_data;
                }
            }
            return empty;
        },
        // 上一题
        handleTopicPrev() {
            if (!this.loading) {
                this.$store.commit("examination/prev");
                this.getExamTopic();
            }
        },
        // 下一题
        handleTopicNext() {
            if (!this.loading) {
                this.$store.commit("examination/next");
                this.getExamTopic();
            }
        },
        // 当前题
        handleTopicChange(index) {
            if (!this.loading) {
                this.cardVisible = false;
                this.$store.commit("examination/change", index);
                this.getExamTopic();
            }
        },
        // 打开答题卡
        onOpenCard() {
            this.cardVisible = true;
        },
        // 收藏
        changeCollection() {
            if (!this.loading) {
                let status = this.topicData.collected == 1 ? 0 : 1;
                this.$edu.api
                    .getTopicCollect({
                        topic_id: this.topicId.toString(),
                        status: status,
                    })
                    .then((res) => {
                        this.$u.toast(res.data);
                        this.topicData.collected = status;
                    });
            }
        },
    },
    destroyed() {
        this.$store.commit("examination/init");
    },
};
</script>
<style lang="scss">
page {
    background-color: #ffffff;
}
</style>
<style lang="scss" scoped>
.topic-navbar-collection {
    padding: 10px 20rpx;
    margin-left: auto;
}
.topic-navbar-sheet {
    padding: 10rpx 20rpx;
    margin-right: 10rpx;
}

.topic-header {
    padding: 30rpx;
    position: relative;
    .title {
        max-width: 60%;
        font-size: 32rpx;
        font-weight: bold;
        color: #303133;
    }
    .img {
        margin-left: auto;
        margin-right: 20rpx;
    }
    .count {
        font-size: 26rpx;
        color: #909399;
    }
    .active {
        @include text-color();
    }
}
.topic-body {
    padding: 0 30rpx;
    margin-bottom: 30rpx;
}
</style>
